<template>
  <div class="p-home">
    <div class="p-tip">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>{{
          navlist[currentNav - 1].title
        }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="mbx">
      <div class="m-l">
        <p class="mmtitle">
          <img src="@/assets/img/personal/avator.svg" alt="" />个人中心
        </p>
        <div class="bx-ul">
          <ul>
            <li
              v-for="(item, index) in navlist"
              :key="index"
              :class="item.key == currentNav ? 'currentNav' : 'navli'"
              @click="handleClickNav(item)"
            >
              {{ item.title }}
            </li>
          </ul>
        </div>
      </div>
      <div class="m-r">
        <Information v-if="currentNav == 1" />
        <Subscribe v-if="currentNav == 2" />
        <Message v-if="currentNav == 3" />
        <Collect v-if="currentNav == 4" />
        <Help v-if="currentNav == 5" />
        <Password v-if="currentNav == 6" />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      currentNav: 2,
      navlist: [
        {
          key: 1,
          title: "基本信息",
        },
        {
          key: 2,
          title: "订阅服务",
        },
        {
          key: 3,
          title: "消息中心",
        },
        {
          key: 4,
          title: "个人收藏",
        },
        {
          key: 5,
          title: "帮助文档",
        },
        {
          key: 6,
          title: "修改密码",
        },
      ],
    };
  },
  watch: {
    $route() {
      this.currentNav = this.$route.query.type || 1;
    },
  },
  methods: {
    handleClickNav(item) {
      let index = item.key;
      if (item.incomplete) {
        this.$message({
          message: "功能开发中，敬请期待！",
          type: "warning",
        });
      } else {
        this.currentNav = index;
        this.$router.push({
          name: "personal",
          query: {
            type: this.currentNav,
          },
        });
      }
    },
  },
  created() {
    this.currentNav = this.$route.query.type || 1;
  },
  mounted() {
    //
  },
  components: {
    Collect: () => import("./child/collect.vue"),
    Help: () => import("./child/help.vue"),
    Information: () => import("./child/information.vue"),
    Message: () => import("./child/message.vue"),
    Password: () => import("./child/password.vue"),
    Subscribe: () => import("./child/subscribe.vue"),
  },
};
</script>
<style lang="scss" scoped>
.p-home {
  .p-tip {
    margin: 30px;
  }
  .mbx {
    min-height: calc(100vh - 150px);
    display: flex;
    background-color: #fff;
  }
  .m-l {
    width: 240px;
    border: 1px solid $color19;
    box-shadow: 3px 3px 10px 2px rgba(0, 0, 0, 0.2);
    margin: 0 30px;
    .mmtitle {
      margin: 0 30px;
      font-size: 20px;
      height: 60px;
      line-height: 60px;
      text-align: center;
      border-bottom: 1px solid $color19;
      img {
        width: 30px;
        margin-right: 10px;
      }
    }
    .bx-ul {
      width: 210px;
      min-height: 400px;
      margin: 0 auto;
    }
    ul {
      li {
        height: 35px;
        line-height: 35px;
        // color: $h3FontColor;
        cursor: pointer;
        text-align: center;
        margin-top: 20px;
        border-radius: 4px;
      }
      .currentNav {
        background: $mainColor;
        color: #ffffff;
      }
    }
  }
  .m-r {
    flex: 1;
    margin-right: 30px;
  }
  ::v-deep {
    .no-data {
      line-height: 100px;
      text-align: center;
      font-size: 14px;
      color: $color6;
      background-color: $color2;
    }
  }
}
</style>
